C.S.Burner 🪙 ━►🔥GIT Node

T8b949e

Tff7b72<templateTff7b72>

Tff7b72<div Te6edf3v-if=Ta5d6ff"active" Te6edf3class=Ta5d6ff"flex-1 flex flex-col max-w-3xl mx-auto w-full pt-2"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"mb-4 flex gap-2"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"relative flex-1"Tff7b72>

Tff7b72<input

Te6edf3:value=Ta5d6ff"contactsSearch"

Te6edf3type=Ta5d6ff"text"

Te6edf3placeholder=Ta5d6ff"Search contacts..."

Te6edf3class=Ta5d6ff"block w-full rounded-lg border-0 py-2 pl-10 text-gray-900 dark:text-white shadow-xs ring-1 ring-inset ring-gray-300 dark:ring-zinc-800 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm dark:bg-zinc-900"

@Te6edf3input=Ta5d6ff"onSearchInput"

Tff7b72/>

Tff7b72<div Te6edf3class=Ta5d6ff"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"magnify" Te6edf3class=Ta5d6ff"size-5 text-gray-400" Tff7b72/>

Tff7b72</div>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-blue-500 transition-colors flex items-center gap-2"

@Te6edf3click=Ta5d6ff"$emit('add')"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"plus" Te6edf3class=Ta5d6ff"size-5" Tff7b72/>

Add

Tff7b72</button>

Tff7b72</div>

Tff7b72<div Te6edf3v-if=Ta5d6ff"contacts.length === 0" Te6edf3class=Ta5d6ff"my-auto text-center"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"bg-gray-200 dark:bg-zinc-800 p-6 rounded-full inline-block mb-4"Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"account-multiple" Te6edf3class=Ta5d6ff"size-12 text-gray-400" Tff7b72/>

Tff7b72</div>

Tff7b72<h3 Te6edf3class=Ta5d6ff"text-lg font-medium text-gray-900 dark:text-white"Tff7b72>No ContactsTff7b72</h3>

Tff7b72<p Te6edf3class=Ta5d6ff"text-gray-500 dark:text-zinc-400"Tff7b72>Add contacts to quickly call them.Tff7b72</p>

Tff7b72</div>

Tff7b72<div v-else Te6edf3class=Ta5d6ff"space-y-4"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"border-b border-gray-200 dark:border-zinc-800 overflow-hidden"Tff7b72>

Tff7b72<ul Te6edf3class=Ta5d6ff"divide-y divide-gray-100 dark:divide-zinc-800"Tff7b72>

Tff7b72<li

Te6edf3v-for=Ta5d6ff"contact in contacts"

Te6edf3:key=Ta5d6ff"contact.id"

Te6edf3class=Ta5d6ff"px-4 py-3 hover:bg-gray-50 dark:hover:bg-zinc-800/50 transition-colors"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-center space-x-3"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"shrink-0"Tff7b72>

Tff7b72<LxmfUserIcon

Te6edf3:custom-image=Ta5d6ff"contact.custom_image"

Te6edf3:icon-name=Ta5d6ff"contact.remote_icon ? contact.remote_icon.icon_name : ''"

Te6edf3:icon-foreground-colour=Ta5d6ff"

contact.remote_icon ? contact.remote_icon.foreground_colour : ''

"

Te6edf3:icon-background-colour=Ta5d6ff"

contact.remote_icon ? contact.remote_icon.background_colour : ''

"

Te6edf3class=Ta5d6ff"size-10"

Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"flex-1 min-w-0"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-center justify-between"Tff7b72>

Tff7b72<p Te6edf3class=Ta5d6ff"text-sm font-bold text-gray-900 dark:text-white truncate"Tff7b72>

Tff7b72{{ Te6edf3contactTe6edf3.name Tff7b72}}

Tff7b72</p>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-center gap-2"Tff7b72>

Tff7b72<span

Te6edf3v-if=Ta5d6ff"contact.preferred_ringtone_id"

Te6edf3class=Ta5d6ff"text-[9px] px-1.5 py-0.5 rounded-sm bg-amber-50 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 border border-amber-100 dark:border-amber-800/50 flex items-center gap-1"

Te6edf3title=Ta5d6ff"Custom Ringtone Set"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"music" Te6edf3class=Ta5d6ff"size-2.5" Tff7b72/>

Tff7b72{{ Te6edf3contactTe6edf3.preferred_ringtone_id Tff7b72==Tff7b72= Tff7b72-T79c0ff1 ? Ta5d6ff"Random" Tff7b72: Ta5d6ff"Custom" Tff7b72}}

Tff7b72</span>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-center gap-1"Tff7b72>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"p-1.5 text-gray-400 hover:text-blue-500 transition-colors"

@Te6edf3click=Ta5d6ff"$emit('edit', contact)"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"pencil" Te6edf3class=Ta5d6ff"size-4" Tff7b72/>

Tff7b72</button>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"p-1.5 text-gray-400 hover:text-red-500 transition-colors"

@Te6edf3click=Ta5d6ff"$emit('delete', contact.id)"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"delete" Te6edf3class=Ta5d6ff"size-4" Tff7b72/>

Tff7b72</button>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-center justify-between mt-1"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"flex flex-col min-w-0"Tff7b72>

Tff7b72<span

Te6edf3class=Ta5d6ff"text-[10px] text-gray-500 dark:text-zinc-500 font-mono truncate cursor-pointer hover:text-blue-500 transition-colors"

Te6edf3:title=Ta5d6ff"contact.remote_identity_hash"

@Te6edf3click.stop=Ta5d6ff"$emit('copy-hash', contact.remote_identity_hash)"

Tff7b72>

ID:

Tff7b72{{ Te6edf3formatDestinationHashTff7b72(Te6edf3contactTe6edf3.remote_identity_hashTff7b72) Tff7b72}}

Tff7b72</span>

Tff7b72<span

Te6edf3v-if=Ta5d6ff"contact.lxmf_address"

Te6edf3class=Ta5d6ff"text-[9px] text-gray-400 dark:text-zinc-500 font-mono truncate cursor-pointer hover:text-blue-500 transition-colors"

Te6edf3:title=Ta5d6ff"contact.lxmf_address"

@Te6edf3click.stop=Ta5d6ff"$emit('copy-hash', contact.lxmf_address)"

Tff7b72>

LXMF: Tff7b72{{ Te6edf3formatDestinationHashTff7b72(Te6edf3contactTe6edf3.lxmf_addressTff7b72) Tff7b72}}

Tff7b72</span>

Tff7b72<span

Te6edf3v-if=Ta5d6ff"contact.lxst_address"

Te6edf3class=Ta5d6ff"text-[9px] text-gray-400 dark:text-zinc-500 font-mono truncate cursor-pointer hover:text-blue-500 transition-colors"

Te6edf3:title=Ta5d6ff"contact.lxst_address"

@Te6edf3click.stop=Ta5d6ff"$emit('copy-hash', contact.lxst_address)"

Tff7b72>

LXST: Tff7b72{{ Te6edf3formatDestinationHashTff7b72(Te6edf3contactTe6edf3.lxst_addressTff7b72) Tff7b72}}

Tff7b72</span>

Tff7b72</div>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"text-[10px] bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 px-3 py-1 rounded-full font-bold uppercase tracking-wider hover:bg-blue-200 dark:hover:bg-blue-900/50 transition-colors shrink-0"

@Te6edf3click=Ta5d6ff"

$emit(

'call',

contact.remote_telephony_hash ||

contact.remote_destination_hash ||

contact.remote_identity_hash

)

"

Tff7b72>

Call

Tff7b72</button>

Tff7b72</div>

Tff7b72</li>

Tff7b72</ul>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../../MaterialDesignIcon.vue";

import LxmfUserIcon from "../../LxmfUserIcon.vue";

export default {

name: "CallContactsTab",

components: {

MaterialDesignIcon,

LxmfUserIcon,

},

props: {

active: {

type: Boolean,

default: false,

},

contactsSearch: {

type: String,

default: "",

},

contacts: {

type: Array,

default: () => [],

},

formatDestinationHash: {

type: Function,

required: true,

},

emits: ["update:contactsSearch", "search-input", "add", "edit", "delete", "copy-hash", "call"],

methods: {

onSearchInput(event) {

this.$emit("update:contactsSearch", event.target.value);

this.$emit("search-input");

},

};

Tff7b72</script>